<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FC24 MOD BY LAOSIJI</title>
</head>
<style>
    @font-face {
        font-family: "Inter";
        src: url("../font/font.woff2") format("woff2");
    }
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html,body {
        height: 100%;
        width: 100%;
        /* font-family: 'Inter'; */
    }

    .flex-center {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #app {
        height: 100%;
        color: #fff;
        background: url(../image/bg3.jpg) no-repeat;
        background-size: cover;
        overflow: auto;
        position: relative;
    }

    .full-h {
        height: 100%;
    }

    .text-box {
        width: 50%;
    }

    .img-box {
        width: 50%;
        position: relative;
    }

    .img-box img {
        height: auto;
        width: 100%;
        object-position: center center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    img {
        height: 100%;
        width: 100%;
    }

    .logo {
        height: 60px;
        width: 100%;
        /* display: flex;
        width: 100%;
        justify-content: flex-start;
        padding-left: 40px; */
    }

    .logo img {
        /* width: auto; */
    }

    .flex-column {
        flex-direction: column;
    }

    .update-box {
        padding: 20px;
        max-width: 90%;
    }

    .title {
        font-size: 23px;
        font-weight: 600;
        color: #00fc7f;
        font-family: 'Inter';
    }

    .content {
        line-height: 2;
        margin-top: 10px;
    }

    .author {
        font-size: 15px;
        color: #00fc7f;
        position: absolute;
        bottom: 10px;
        right: 50%;
        transform: translateX(50%);
        font-family: 'Inter';
    }

    .spirit {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 256px;
        height: 256px;
        background: url(../image/bg2.png);
        background-repeat: no-repeat;
        /* background-size: 70%; */
        overflow: hidden;
        /* animation: spirit 15s steps(168) infinite; */
        animation: spirit1 0.5s steps(13), 
                    spirit2 0.5s 0.5s steps(13), 
                    spirit3 0.5s 1s steps(13), 
                    spirit4 0.5s 1.5s steps(13),
                    spirit5 0.5s 2s steps(13), 
                    spirit6 0.5s 2.5s steps(13), 
                    spirit7 0.5s 3s steps(13),
                    spirit8 0.5s 3.5s steps(13), 
                    spirit9 0.5s 4s steps(13), 
                    spirit10 0.5s 4.5s steps(13),
                    spirit11 0.5s 5s steps(13), 
                    spirit12 0.5s 5.5s steps(13);
        /* animation-direction:reverse ; */
        /* animation-iteration-count: 1; */
    }

    @keyframes spirit1 {
        from {
            background-position: 0 0;
        }

        to {
            background-position: -3328px 0;
        }
    }

    @keyframes spirit2 {
        from {
            background-position: 0 -256px;
        }

        to {
            background-position: -3328px -256px;
        }
    }

    @keyframes spirit3 {
        from {
            background-position: 0 -512px;
        }

        to {
            background-position: -3328px -512px;
        }
    }
    @keyframes spirit4 {
        from {
            background-position: 0 -768px;
        }

        to {
            background-position: -3328px -768px;
        }
    }

    @keyframes spirit5 {
        from {
            background-position: 0 -1024px;
        }

        to {
            background-position: -3328px -1024px;
        }
    }

    @keyframes spirit6 {
        from {
            background-position: 0 -1280px;
        }

        to {
            background-position: -3328px -1280px;
        }
    }
    @keyframes spirit7 {
        from {
            background-position: 0 -1536px;
        }

        to {
            background-position: -3328px -1536px;
        }
    }
    @keyframes spirit8 {
        from {
            background-position: 0 -1792px;
        }

        to {
            background-position: -3328px -1792px;
        }
    }
    @keyframes spirit9 {
        from {
            background-position: 0 -2048px;
        }

        to {
            background-position: -3328px -2048px;
        }
    }
    @keyframes spirit10 {
        from {
            background-position: 0 -2304px;
        }

        to {
            background-position: -3328px -2304px;
        }
    }
    @keyframes spirit11 {
        from {
            background-position: 0 -2560px;
        }

        to {
            background-position: -3328px -2560px;
        }
    }
    @keyframes spirit12 {
        from {
            background-position: 0 -2816px;
        }

        to {
            background-position: -3328px -2816px;
        }
    }
</style>
<body>
    <div id="app">
        <div class="flex-center full-h">
            <div class="text-box full-h flex-column flex-center">
                <div class="logo">
                    <img src="../image/fc24-logo.svg"/>
                </div>
                <div class="update-box">
                    <div class="title">UPDATE INFO (2023/10/28)</div>
                    <div class="content">
                        1. Update the Match Day for November<br/>
                        2. Update background music<br/>
                        3. Update club locker room<br/>
                        4. Update cup match random match<br/>
                        5. Fix bugs
                    </div>
                </div>
            </div>
            <div class="img-box full-h">
                <img src="../image/bg1.jpg"/>
            </div>
        </div>
        <div class="spirit"></div>
        <p class="author">MOD BY LAOSIJI</p>
    </div>
</body>
</html>